<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		button, span{
			width: 50px;
			height: 50px;
			font-size: 40px;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script></script>
	<body>
		<div id="app">
			<h2>通过点击按钮增减展示斐波那契数列。</h2>
			<button :disabled="count < 2"  @click="sub">-</button>
			<span>{{count}}</span>
			<button @click="add">+</button>
			<h3>斐波那契数列:{{get_feibo_list}}</h3>
		</div>
		<script>
			const app = new Vue({
				el:'#app',
				data:{	
					count: 1
				},
				methods:{
					add(){
						this.count++
					},
					sub(){
						this.count--
					}
				},
				computed: {
					get_feibo_list(){
						let value_list = [0, 1]
						if(this.count < 3){
							return value_list.splice(0, this.count)					
						}else{
							for(i=2; i<this.count; i++){
								value_list.push(value_list.slice(-2).reduce((m, n) => m+n))
							}
							return value_list
						}
					}					
				}
			})
		</script>
	</body>
</html>




